<template>
  <div>
  <basic-container >
    <el-row style="margin-bottom: 20px;margin-top: 30px">
          <div style="font-size: 16px;
font-family: Source Han Sans CN;
font-weight: 500;
color: #000000;">账号封禁</div>
    </el-row>
    <el-row style="margin-bottom: 20px;margin-top: 30px">
      <el-alert style="padding-left: 30px"
        title="点击添加设置多个封禁账号"
        type="warning"
        show-icon>
      </el-alert>
    </el-row>
    <el-form :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm"  ref="ruleForm">
    <el-row v-for="(itemList,index) in ruleForm.accountBan" :key="index" style="margin-top: 15px">
      <el-col span="8">
        <el-form-item :prop="`accountBan[${index}].accounts`" :rules="{ required: true, message: '请输入账号', trigger: 'blur' }" label="玩家账号：" style="margin-bottom: 0px">
          <el-input  style="width: 90%"   clearable v-model="itemList.accounts"></el-input>
        </el-form-item>
      </el-col>
      <el-col span="8">
        <el-form-item :prop="`accountBan[${index}].banProjectId`" :rules="{ required: true, message: '请选择游戏设备', trigger: 'blur' }" label="游戏设备：" style="margin-bottom: 0px">
          <el-select style="width: 90%" v-model="itemList.banProjectId" clearable   multiple @change="$forceUpdate()"
                     placeholder="请选择游戏设备" filterable>
            <el-option
              v-for="item in gameProjectlist"
              :key="item.id"
              :label="item.name "
              :value="item.id"/>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col span="8" style="margin-top: 10px">

        <img v-if="index==0" @click="addInput" src="https://yulonghuyu.oss-cn-hangzhou.aliyuncs.com/app-web/xitong/jia%402x.png" style="width: 19px;height: 19px">

        <img v-if="index>0" @click="delInput(index)" src="https://yulonghuyu.oss-cn-hangzhou.aliyuncs.com/app-web/xitong/%E5%9C%86%E8%A7%92%E7%9F%A9%E5%BD%A2%202911%402x.png" style="width: 19px;height: 19px">
      </el-col>
    </el-row>
    </el-form>
    <el-button style="margin-top: 20px;" type="primary" @click="onSubmitsuer('ruleForm')">确认封禁</el-button>
  </basic-container>
    <basic-container>
      <vue-element-loading :active="isActive" spinner="bar-fade-scale" color="#409eff" background-color="rgba(255,255,255,0.2)"/>
      <el-form :inline="true" >
        <div style="font-size: 16px;margin-top: 0px;
font-family: Source Han Sans CN;
font-weight: 500;
color: #000000;float: left">账号封禁记录</div>
        <div style="margin-top: 22px;width: 100%; text-align: right" >

          <!--          <el-form-item>-->
          <!--            <el-select v-model="formInline.promoteLeadId"  clearable placeholder="推广商(会长)">-->
          <!--              <el-option-->
          <!--                v-for="item in presidentList"-->
          <!--                :key="item.id"-->
          <!--                :label="item.account"-->
          <!--                :value="item.id"/>-->
          <!--            </el-select>-->
          <!--          </el-form-item>-->

          <el-form-item>
            <el-input placeholder="玩家账号" v-model="formInline.account" clearable></el-input>
          </el-form-item>

          <el-form-item>
            <el-date-picker
              clearable
              v-model="time"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="封禁开始日期"
              end-placeholder="封禁结束日期"
              :default-time="['00:00:00', '23:59:59']"
              :picker-options="pickerOptions">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search" type="primary" @click="onSubmit">查询</el-button>
            <!--            <el-button type="danger" icon="el-icon-edit" @click="unblock">批量解封</el-button>-->
          </el-form-item>
        </div>
      </el-form>
      <el-row>
        <el-col :span="24">
          <template>
            <el-table
              :data="tableData"
              stripe

              style="width: 100%">
              <!--              <el-table-column-->
              <!--                type="selection"-->
              <!--                width="55">-->
              <!--              </el-table-column>-->
              <el-table-column
                prop="account"
                width="150"
                label="玩家账号" key="1">
                <template slot-scope="scope">
                <span v-if="scope.row.phone!=''"><span
                  class="skucost-pruice">{{ scope.row.phone}}</span></span>
                  <span v-else><span
                    class="skucost-pruice">{{ scope.row.account}}</span></span>
                </template>
              </el-table-column>
              <el-table-column
                prop="registerImei"
                width="300"
                label="设备IMIE/IDFA" key="2">
              </el-table-column>
              <el-table-column
                prop="device"
                label="设备型号">
              </el-table-column>
              <el-table-column
                prop="registerTime"
                label="注册时间" key="3">
                <template slot-scope="scope">
                <span v-if="scope.row.registerTime!=''"><span
                  class="skucost-pruice">{{ scope.row.registerTime | formatDate('YYYY-MM-DD HH:mm:ss') }}</span></span>
                </template>
              </el-table-column>
              <el-table-column
                prop="registerIp"
                label="注册IP" key="4">
              </el-table-column>
              <el-table-column
                prop="loginTime"
                label="最近登录时间" key="5">
                <template slot-scope="scope">
                <span v-if="scope.row.loginTime!=''"><span
                  class="skucost-pruice">{{ scope.row.loginTime  | formatDate('YYYY-MM-DD HH:mm:ss') }}</span></span>
                </template>
              </el-table-column>
              <el-table-column
                prop="accountStatus"
                label="状态" key="6">
                <template slot-scope="scope">
                <span v-if="scope.row.accountStatus==1"><span
                  class="skucost-pruice" style="color: #ff4d51">封禁</span></span>
                  <span v-else><span
                    class="skucost-pruice">正常</span></span>
                </template>
              </el-table-column>

              <el-table-column
                prop="projectName"
                label="封禁游戏" key="6">

              </el-table-column>
              <el-table-column
                prop="banTime"
                label="封禁时间" key="7">
                <template slot-scope="scope">
                <span v-if="scope.row.banTime!=''"><span
                  class="skucost-pruice">{{ scope.row.banTime  | formatDate('YYYY-MM-DD HH:mm:ss') }}</span></span>
                </template>
              </el-table-column>
              <el-table-column
                prop="promoteMangerName"
                label="推广商账号" key="8" :render-header="renderHeader">
              </el-table-column>
              <el-table-column
                prop="paccount"
                label="组长账号" v-if="isshowtrue" key="9" >
              </el-table-column>
              <el-table-column
                prop="promoter"
                label="推广员账号" v-if="isshowtrue" key="10">
              </el-table-column>
              <el-table-column
                prop="address"
                label="操作">
                <template slot-scope="scope">
                  <el-button type="text" size="small" @click.native="viewRole(scope.row)">解封</el-button>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page.currentPage"
            :page-sizes="[10,20, 50, 100, 200]"
            :page-size="page.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.total">
          </el-pagination>
        </el-col>
      </el-row>


      <el-dialog :title="mode" :visible.sync="dialogFormVisible" @close="closeDialog()" customClass="customWidthUser">
        <div v-if="dialogFormVisible">
          <el-form :model="form" :rules="rules" label-width="100px" class="demo-ruleForm" ref="ruleForm">
            <el-form-item prop="banProjectId" label="游戏设备">
              <el-select style="width: 100%;"  v-model="form.banProjectId" clearable   multiple @change="$forceUpdate()"
                         placeholder="请选择游戏设备" filterable>
                <el-option
                  v-for="item in gameProjectlist"
                  :key="item.id"
                  :label="item.name "
                  :value="item.id"/>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="closeDialog()">取 消</el-button>
          <el-button type="primary" @click="addBannerFunc">确 定</el-button>
        </div>
      </el-dialog>
    </basic-container>
  </div>
</template>

<script>
import {accountBan, getpromoterList} from "@/api/system/user";
import {gameList, gameTypeList} from "@/api/game/game";
import website from "@/config/website";
import VueElementLoading from "vue-element-loading";
import {getBanAccountList, updateAccount} from "@/api/system/details";
export default {
  name: "accountBan",
  data() {
    return {
      gameProjectlist:[],
      isActive: false,
      isshowtrue:false,
      dialogFormVisible:false,
      gameType:[],
      multipleSelection: [],
      time: null,
      loading: true,
      leadlevel: 3,//组长等级
      lead: {},
      presidentList:{},
      pickerOptions: website.pickerOptions,
      page: {
        currentPage: 1,
        pageSize: 20,
        total: '',
      },
      promoterDTO:{
        id:'',
        userPid:'',
        level: 2,//推广商等级
      },
      formInline: {
        typeId: '',
        promoteMangerId: '',
        account: '',
        promoteLeadId:'',
        accountStatus:1,
      },
      form: {
        id: '',
        banProjectId:[],
        accountStatus:0,
      },
      tableData: [],
      ruleForm:{
        accountBan:[
          { accounts: '', banProjectId:[]},
        ],
      },

    }
  },
  components: {
    VueElementLoading
  },
  computed: {},
  created() {
    gameList(this.formInline).then(res => {
      const data = res.data.data;
      this.gameProjectlist = data;
    });
    this.nowload();
    this.onload();

  },
  methods:{
    addInput() {
      this.ruleForm.accountBan.push({'accounts': '', 'banProjectId':[] })
    },
    delInput(index) {
      this.ruleForm.accountBan.splice(index, 1)
    },
    onSubmitsuer(ruleForm) {
      this.$refs[ruleForm].validate((valid) => {
        if (valid) {
          this.$confirm("确定封禁这些玩家账号吗？", '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            for (let i = 0; i < this.ruleForm.accountBan.length; i++) {
              this.ruleForm.accountBan[i].banProjectId=this.ruleForm.accountBan[i].banProjectId.join(",")
            }
            // var projectId = this.form.banProjectId.join(",");
            accountBan(this.ruleForm).then(res=>{
              this.ruleForm={
                accountBan:[
                  { accounts: '', banProjectId:[]},
                ],
              }
              if(res.data.success == true) {
                this.$alert(res.data.msg, '提示', {
                  confirmButtonText: '确定',
                  callback: action => {
                    this.onSubmit();
                  }
                });
              } else {
                this.$alert("账号封禁失败！", '提示', {
                  confirmButtonText: '确定',
                  callback: action => {
                  }
                });
              }
            })
          }).catch(() => {


          });
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    renderHeader () {
      return (
        <div style="display: flex;justify-content: space-between;">
          <div><span>推广商</span>  </div>
          <div  on-click={()=>this.showAll()}> {this.isshowtrue ?  <span style="color:red" class="el-icon-minus"/> : <span style="color:red" class="el-icon-plus"/>} </div>
        </div>
      )
    },
    showAll(){
      this.isshowtrue ? this.isshowtrue = false : this.isshowtrue = true;
      this.$refs['el-table'].doLayout();
    },
    addBannerFunc(){
      this.$confirm("是否解封该玩家?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.form.banProjectId = this.form.banProjectId.join(",");
        updateAccount(this.form).then(res => {
          if (res.data.success) {
            this.dialogFormVisible=false;
            this.$message({
              type: "success",
              message: "解封信息成功!"
            });
            this.onSubmit();
          } else {
            this.$message({
              type: "error",
              message: res.data.msg
            });
          }
        });
      })
    },
    viewRole(row) {
      this.dialogFormVisible=true;
      this.form.id=row.id;
      if(row.banProjectId.length!=0){
        for (let i = 0; i < row.banProjectId.split(",").length; i++) {
          this.form.banProjectId.push(Number(row.banProjectId.split(",")[i]))
        }
      }
    },
    /* 关闭清空表单 */
    closeDialog() {
      this.form =  {
        id: '',
        banProjectId:[],
        accountStatus:0,
      },
        this.dialogFormVisible = false;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.page.pageSize = val;
      var banStartTime = undefined;
      var banEndTime = undefined;
      console.log('this.time', this.time)
      if (this.isNotEmpty(this.time)) {
        banStartTime = this.time[0].getTime()
        banEndTime = this.time[1].getTime()
      }
      this.page.currentPage=1
      this.onload(banStartTime, banEndTime);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.page.currentPage = val;
      var banStartTime = undefined;
      var banEndTime = undefined;
      console.log('this.time', this.time)
      if (this.isNotEmpty(this.time)) {
        banStartTime = this.time[0].getTime()
        banEndTime = this.time[1].getTime()
      }
      this.onload(banStartTime, banEndTime);
    },

    isNotEmpty(arr) {
      return arr != null && arr.length !== 0
    },
    isEmpty(arr) {
      return !this.isNotEmpty(arr)
    },
    nowload() {
      this.loading = true,
        getpromoterList(this.promoterDTO).then(res => {
          const data = res.data.data;
          this.lead= data;
        });
      gameTypeList().then(res => {
        const data = res.data.data;
        this.gameType = data;
      });
      this.loading = false;
    },
    unblock(){
      let ids = [];
      let idss = '';
      if(this.multipleSelection.length==0){
        this.$message({
          type: "error",
          message: "请先选择需要解封的玩家"
        });
        return;
      }else {
        this.multipleSelection.forEach(ele => {
          ids.push(ele.id);
        });
        idss =  ids.join(",");
      }
      this.$confirm("是否批量解封玩家?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {

        updateAccount(idss).then(res => {
          if (res.data.success) {
            this.$message({
              type: "success",
              message: "解封信息成功!"
            });
            this.onSubmit();
          } else {
            this.$message({
              type: "error",
              message: res.data.msg
            });
          }
        });
      })
    },
    onSubmit() {

      var banStartTime = undefined;
      var banEndTime = undefined;
      console.log('this.time', this.time)
      if (this.isNotEmpty(this.time)) {
        banStartTime = this.time[0].getTime()
        banEndTime = this.time[1].getTime()
      }
      this.page.currentPage=1
      this.onload(banStartTime, banEndTime);
      console.log('this.time2', banStartTime,banEndTime)
    },
    onload(banStartTime, banEndTime) {
      this.isActive = true
      this.loading = true;
      getBanAccountList(this.page.currentPage, this.page.pageSize, Object.assign(this.formInline), banStartTime, banEndTime).then(res => {
        this.isActive = false
        const data = res.data.data;
        console.log("res.data.data", res.data.data)
        this.page.total = data.total;
        this.tableData = data.records;
        this.loading = false;
      });
    }







  }
}
</script>

<style scoped>

</style>
